<template>
    <div>
        <h1 class="title">注册</h1>
        <InputElement
            v-model="username.value"
            @validate="validateUsername"
            >用户名：</InputElement
        >
        <InputElement
            v-model="pwd.value"
            type="password"
            @validate="validatePwd"
            >密码：</InputElement
        >
        <InputElement
            v-model="confirm.value"
            type="password"
            @validate="validateConfirm"
            :info="confirm.info"
            >确认密码：</InputElement
        >
        <input type="button" value="注册" @click="handleSubmit" />
    </div>
</template>

<script>
import InputElement from "../components/InputElement.vue";
import {usernameExist,reg} from '../services/user'
export default {
    data() {
        return {
            username: {
                info: "",
                value: "",
            },
            pwd: {
                info: "",
                value: "",
            },
            confirm: {
                info: "",
                value: "",
            },
        };
    },
    methods: {
        validateUsername(e) {
            if (/^\w{6,20}$/.test(this.username.value)) {
                this.username.info = "√";
                return true;
            } else {
                this.username.info = "X";
                return false;
            }
        },
        validatePwd(e) {
            if (/^.{6,}$/.test(this.pwd.value)) {
                this.pwd.info = "√";
                return true;
            } else {
                this.pwd.info = "X";
                return false;
            }
        },
        validateConfirm(e) {
            if (this.pwd.value == this.confirm.value) {
                this.confirm.info = "√";
                return true;
            } else {
                this.confirm.info = "两次密码不一致";
                return false;
            }
        },
        handleSubmit() {
            console.log(this.username.info,this.pwd.info);
            if (
                this.validateUsername() &&
                this.validatePwd() &&
                this.validateConfirm()
            ) {
                this.$router.push("/login");
                alert("注册成功");
            } else {
                alert("注册失败");
            }
        },
    },
    components: {
        InputElement,
    },
};
</script>

<style scoped>
.title {
    color: red;
}
label {
    color: blue;
}
</style>